<template>
    <menu-bar>
        <div slot="md-left" class="md-left-item">
         <div >
           <router-link to="/homevideo"><a href="#"><h4>电影</h4></a></router-link>
           <a href="#"><p>热播大片</p></a>
           <a href="#"><p>全部电影</p></a>
         </div>
         <div>
           <router-link to="/teleplay"><a href="#" ><h4>电视</h4></a></router-link>
           <a href="#"><p>迷雾剧场</p></a>
           <a href="#"><p>爱青春</p></a>
         </div>
         <div>
           <router-link to="/variety"><a href="#"><h4>综艺</h4></a></router-link>
           <a href="#"><p>王牌自制</p></a>
           <a href="#"><p>最新热播</p></a>
         </div>
         <div>
           <router-link to="/cartoon"><a href="#" ><h4>动漫</h4></a></router-link>
           <a href="#"><p>最热国漫</p></a>
           <a href="#"><p>新播上线</p></a>
         </div>
         <div>
           <router-link to="/childes"><a href="#"><h4>儿童</h4></a></router-link>
           <a href="#"><p>热播动漫</p></a>
           <a href="#"><p>最新动漫</p></a>
         </div>
         <div>
           <router-link to="/documentary"><a href="#"><h4>纪录片</h4></a></router-link>
           <a href="#"><p>热播剧场</p></a>
           <a href="#"><p>探索世界</p></a>
         </div>
       </div>
       <div slot="md-right" class="md-right-item">
        <div>
          <a href="#"><h5>热点</h5></a>
          <a href="#"><p>知识</p></a>
          <a href="#"><p>咨讯</p></a>
        </div>
        <div>
          <a href="#"><h5>娱乐</h5></a>
          <a href="#"><p>体育</p></a>
          <a href="#"><p>财经</p></a>
        </div>
        <div>
          <a href="#"><h5>风云榜</h5></a>
          <a href="#"><p>泡泡</p></a>
          <a href="#"><p>搞笑</p></a>
        </div>
        <div class="md-right-item-a">
          <p></p>
        </div>
        <div>
          <a href="#"><h5>游戏</h5></a>
          <a href="#"><p>公益</p></a>
          <a href="#"><p>军事</p></a>
        </div>
      </div>
    </menu-bar>
</template>

<script>
import MenuBar from './MenuBar'
export default {
  name:'MenuBarItem',
  components:{
    MenuBar
  },
}
</script>

<style scoped>
  .md-left-item, .md-right-item{
    height: 150px;
    display: flex;
    justify-content: space-around;
    text-align: center;
  }
  .md-left-item{
    height: 100px;
    border-right: 2px solid rgba(100, 100, 100, .4);
  }
  .md-right-item{
    padding-top: 5px;
  }
  .md-right-item-a{
    height: 100px;
    border-right: 2px solid rgba(100, 100, 100, .3)
  }
  .md-left-item a:hover{
    color: salmon;

  } 
  .md-right-item a:hover{
    color: salmon;
  }
</style>